<script>
    import List from '../components/list.svelte';
    import Btn from '../components/btn.svelte';
    import Paging from '../components/paging.svelte';
    import { onMount } from 'svelte';
    import { Post } from '../lib/net.js';
    import { WithdrawState } from '../conf.js';
    import { WithdrawRefuse,WithdrawConfirm,WithdrawList } from '../api.js';
    import Query from '../model/query.js';
    import moment from 'moment';

    let btnText = `<i>+</i>添加代理`
    let btnHref = "/agent/add"

    let data = {title:[ "UID","姓名","手机号","邮箱","代理人","订单编号","提币数量","提币地址","提币时间","到账时间","状态" ,"取消"],data:[]}

    let total = 0;

    var query = new Query();

    onMount(()=>{
        getList();
    });

    async function getList(){
       query.size = 7;
       let ret = await Post(WithdrawList,query)
       query.total = ret.total;
       query.page = ret.page;
       query.size = ret.size;

       let _data = [];
       if (query.state >= 1) {
          data.title = [ "UID","姓名","手机号","邮箱","代理人","订单编号","提币数量","提币地址","提币时间","到账时间"];
       }
       for(let item of ret.list) {
        let arr = [
            item.uid, item.name,item.phone,item.email,item.agent,item.tid,item.amount,item.withdraw_addr,item.show_operate_date,item.show_done_date || ""
            ]
            if(!query.state) {
                arr.push( `<button class="button is-success is-small" data-id=${item.tid} type="access" on:click> 通过 </button>`)
                arr.push( `<button class="button is-danger is-small" data-id=${item.tid} type="failed" on:click>取消</button>`)
            }
        arr.id = item.tid;
        arr.handler = access;
       _data.push(arr);
       }
       data.data = _data;
    }

    async function access(){

        let btn = this.querySelector("button");

        let tid = btn.getAttribute("data-id");
        let btnType = btn.getAttribute("type");

        if (btnType == "access") {
            await Post(WithdrawConfirm,{tid});
        } else {
            await Post(WithdrawRefuse,{tid})
        }

        getList();
    }

    function setPage(page){
        query.page = page;
        getList();
    }

    function prepareList(){
        query.state = 0;
        getList();
    }
    function accessList(){
        query.state = 1;
        getList();
    }
    function doneList(){
        query.state = 2;
        getList();
    }
</script>

<div class="view">
    <div class="container backBlue colorWhite borderRadius">
        <div class="columns">
            <div class="column is-2">
                <nav class="level">
                    <div class="level-item has-text-centered">
                        <div>
                            <p class="heading">提币总数</p>
                            <p class="font25 colorWhite">{query.total}笔</p>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="buttons">
            <button class="button" on:click={prepareList}>
                待审核
            </button>
            <button class="button" on:click={accessList}>
                已审核
            </button>
            <button class="button" on:click={doneList}>
                已完成
            </button>
        </div>
    </div>
    <div class="container">
        <List data={data}/>
    </div>
    <div class="container">
        {#if query.total !== 0}
        <Paging page={query} handler={setPage}/>
        {/if}
    </div>
</div>

<style>
    .container {
        margin: 20px;
    }
    .info {
        background: #fff;
    }
    .btn {
        line-height: 5px;
        top: 50%;
        transform: translateY(10%);
    }
    .view {
        overflow-y: scroll;
    }
</style>
